<template>
	<view class="zone">
		<Header title="药田"></Header>
		<view class="main">
			<image class="bg" src="http://image.qxgm.site/tdz/img/yaoyuan/ng-20.png" mode="widthFix"></image>

			<view class="fiedld">
				<!-- 1-2 2-不 3-3 4-不 5-4 6-5 7-不 8-6  -->
				<view :class="['part','postion'+(index+1)]" v-for="(item,index) in list" :key="index"
					@click="caozuo(item)">
					<!-- 0 空闲 1种植中 2 已成熟 -->
					<view class="viplist" v-if="item.state == null">
						{{index == 0 ? '' : index == 1 ? '超凡脱俗解锁' : index == 2 ? '天劫高手解锁' : index == 3 ? '天启圣者解锁' : index == 4 ? '绝对掌控解锁' : index == 5 ? '神界至尊解锁' : ''}}
					</view>
					<image class="tian"
						:src="item.state == null ? 'http://image.qxgm.site/tdz/img/yaoyuan/mg-03.png' : item.state == 0 ? 'http://image.qxgm.site/tdz/img/yaoyuan/mg-04.png' : item.state==1?'http://image.qxgm.site/tdz/img/yaoyuan/mg-05.png':item.get_props.img"
						mode="widthFix"></image>
					<view class="tipo" v-if="item.state!=null">
						<image class="timg flybox4"
							:src="item.state==0?'http://image.qxgm.site/tdz/img/yaoyuan/mg-02.png':item.state==1?'http://image.qxgm.site/tdz/img/yaoyuan/mg-07.png':item.state==2?'http://image.qxgm.site/tdz/img/yaoyuan/mg-01.png':''"
							mode="widthFix"></image>
						<text style="z-index: 9;">{{item.state==0?'可播种':item.state==1?'可加速':item.state==2?'可摘取':''}}</text>
						<view class="time" v-if="item.state == 1"><u-count-down :autoplay="true" separator-size='18'
								:font-size='18' separator-color='#FFFFFF' :show-days='false' :show-hours='true'
								:show-minutes='true' :show-seconds='true' separator='zh' color='#ffffff' bg-color='none'
								:timestamp="item.get_props.left_time"></u-count-down></view>
					</view>
				</view>
			</view>
			<view class="navbox">
				<image @click="$p.navto('/pages/index/friendRecords')" class="img1"
					src="http://image.qxgm.site/tdz/img/yaoyuan/mg-11.png" mode="widthFix"></image>
				<image @click="$p.navto('/pages/index/fieldRecords')" class="img2"
					src="http://image.qxgm.site/tdz/img/yaoyuan/mg-10.png" mode="widthFix"></image>
				<image @click="$p.navto('/pages/index/knapsack')" class="img3" style="width: 90%;"
					src="http://image.qxgm.site/tdz/img/yaoyuan/mg-09.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- 草药列表 -->
		<u-mask :show="openList" :zoom='false' @click="openList = false"
			:custom-style="{background: 'rgba(0, 0, 0, 0.1)'}">
			<view :class="['warp3',openList==true?'showHandler':'hideHandler'] " @tap.stop>
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="linuan">
							<image class="linimg" src="http://image.qxgm.site/tdz/img/yaoyuan/mg-13.png"
								mode="widthFix"></image>
							<text>{{userinfo.lingshi}}</text>
						</view>
						<scroll-view scroll-y="true" class="gundong">
							<view class="caolist">
								<view class="link" v-for="(item,index) in seedlist" :key="index"
									@click="zhongzhi(item)">
									<text class="hua1">{{item.name}}</text>
									<view class="stime">
										{{item.times}}分钟成熟
									</view>
									<image class="garden" :src="item.get_props.img" mode="widthFix"></image>
									<view class="boz">
										<view class="bo1">
											<text>{{item.coin_in}}</text>
											<image src="http://image.qxgm.site/tdz/img/yaoyuan/mg-14.png"
												mode="widthFix">
											</image>
										</view>
										<view class="boh">
											播种
										</view>
									</view>
								</view>
							</view>

						</scroll-view>

					</view>
				</view>
				<image class="m_close3" @click="openList = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>
		<!-- 播种确认 -->
		<u-mask :show="seeding">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>播种确认</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<view class="ysbao">
								您确认要使用<text class="t1">{{item.coin_in}}灵石</text>播种<text
									class="t2">{{item.name}}</text>吗？
							</view>
							<view class="small hei" v-if="item.get_props">{{item.name}}:<text class="book">{{item.get_props.info}}</text>  预计{{item.times}}分钟成熟</view>
							<view class="small">可邀请好友助力加速</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againCofirm">确认种植</u-button>
						<view class="sendtip">
							当前灵石：{{userinfo.lingshi}}
						</view>
					</view>
				</view>
				<image class="m_close" @click="seeding = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 加速 -->
		<u-mask :show="accelerate">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>加速</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jiasubox">
							<view class="jianbox">
								<image class="freeadimg" v-if="ad_free==1"
									src="http://image.qxgm.site/tdz/img/tk/mg-14.png" mode="widthFix"></image>
								<image class="seeAdv" src="http://image.qxgm.site/tdz/img/yaoyuan/smg-01.png"
									mode="widthFix"></image>
								<view class="jiaustile">
									观看视频可 <br> 加速30分钟
								</view>
								<view class="yikan">
									今日:<text>{{getspeeditem.video_num}}</text>/{{getspeeditem.video_max}}
								</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="seea" @click="seeadv">{{ad_free==1?'免广告加速':'看视频加速'}}</u-button>
							</view>
							<view class="jianbox">
								<image class="seeAdv" src="http://image.qxgm.site/tdz/img/yaoyuan/smg-02.png"
									mode="widthFix"></image>
								<view class="jiaustile">
									好友助力可 <br> 加速30分钟
								</view>
								<view class="yikan">
									今日:<text>{{getspeeditem.help_num}}</text>/{{getspeeditem.help_max}}
								</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="seea" @click='huhuan'>呼朋唤友</u-button>
							</view>
							<view class="jianbox">
								<image class="seeAdv" src="http://image.qxgm.site/tdz/img/yaoyuan/smg-03.png"
									mode="widthFix"></image>
								<view class="jiaustile">
									达到天骄之王<br> 加速30分钟
								</view>
								<view class="yikan">
									今日:<text>{{getspeeditem.vip_num}}</text>/{{getspeeditem.vip_max}}
								</view>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
									class="seea" @click="huiyuanJia">会员加速</u-button>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="accelerate = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 好友助力 -->
		<u-mask :show="friend">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>好友助力</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<scroll-view scroll-y class="scrollbox" @scrolltolower="scnextrecord">
							<view class="item" v-for="(item,index) in friendlist" :key="index">
								<image class="header" :src="item.avatar" mode="widthFix"></image>
								<view class="ybox">
									<view class="name">
										昵称:{{item.username}}
									</view>
									<view class="sind">
										ID:{{item.invite_code}}
									</view>
								</view>
								<view :class="[item.is_send == 1 ? 'received' : 'receive' ]" @click="yaoqing(item)">
									{{item.is_send == 1 ? '已邀请' : '邀请'}}
								</view>
							</view>
							<view class="empty" v-if="friendlist.length==0">
								<image src="http://img.cpgm.cc/xfmz/static/public/empty.png" mode="widthFix" />
								暂无数据
							</view>
							<view class="more" v-else>
								{{loadText}}
							</view>
						</scroll-view>
					</view>
				</view>
				<image class="m_close" @click="friend = false,friendlist = [],page = 1"
					src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>

		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view class="parts">
								<view class="sbimg">
									<image class="tanimg" :src="goods.img" mode="widthFix">
									</image>
								</view>
								<view class="toan">
									{{goods.name}}x{{goods.num}}
								</view>
							</view>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="obtain=false">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="obtain = false">
					点击任意位置退出
				</view>
			</view>
		</u-mask>



		<!-- 苹果视频 -->
		<u-mask :show="showVideo">
			<view class="videoPop">
				<image class="videocss" :src="video" mode="heightFix"></image>
				<u-count-down class="potime" :autoplay="false" ref="uCountDown" separator-size='24' :font-size='24'
					separator-color='#fff' :show-seconds='true' :show-minutes='false' :show-hours='false' separator='zh'
					:show-days='false' color='#fff' bg-color='none' :timestamp="27"></u-count-down>
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tanName: '草药',
				value: '100',
				obtain: false,
				accelerate: false,
				openList: false,
				seeding: false,
				friend: false,
				list: ['', '', '', '', '', ''],
				id: '', //土地的id
				seedlist: [],
				userinfo: {},
				getspeeditem: {}, //助力存储
				goods: {}, //收取药材存储
				friendlist: [], // 好友列表
				item: {},
				open: true,
				page: 1,
				max_page: '',
				loadText: '没有更多了',


				showVideo: false,
				video: '',
				timer: '',
				isLoading: false,
				urlCallback: {
					userId: uni.getStorageSync('id'),
					extra: ''
				},
				ad_free: '',
			}
		},
		onShow() {
			this.getUserInfo();
			this.fieldindex()
			this.accelerate = false
		},
		onLoad() {},
		computed: {

		},
		methods: {


			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
					this.ad_free = res.data.free_ad
					uni.setStorageSync('userinfo', res.data)
				}
			},
			async fieldindex() {
				let res = await this.$http.index.fieldindex()
				if (res.code == 1) {
					this.list = res.data
				}
			},
			// 对药田操作
			async caozuo(item) {
				console.log(item);
				this.id = item.id
				this.urlCallback.extra = '2_' + item.id
				// 0 空闲 1种植中 2 已成熟
				if (item.state == 0) { //种植
					let res = await this.$http.index.seed()
					if (res.code == 1) {
						this.seedlist = res.data
						this.openList = true //打开种子包
					} else {
						this.$u.toast(res.msg)
					}
				} else if (item.state == 1) { //助力
					let res = await this.$http.index.getspeed({
						type: 2
					})
					if (res.code == 1) {
						this.getspeeditem = res.data
						this.accelerate = true
					} else {
						this.$u.toast(res.msg)
					}
				} else if (item.state == 2) { //收取
					let res = await this.$http.index.seedout({
						land_id: this.id,
					})
					if (res.code == 1) {
						this.goods = res.data
						this.fieldindex()
						this.obtain = true
					} else {
						this.$u.toast(res.msg)
					}
				}
			},

			async huhuan() {
				let res = await this.$http.index.getfriends({
					type: 2,
					page: this.page
				})
				if (res.code == 1) {
					this.friendlist = [...this.friendlist, ...res.data.data]
					this.max_page = res.data.last_page
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';


					this.friend = true
					this.accelerate = false
				}

			},
			scnextrecord() {
				if (this.page >= this.max_page) {
					this.loadText = '没有更多了'
					return;
				}
				this.loadText = '努力加载中';
				this.page = ++this.page;
				this.huhuan() //好有列表
				setTimeout(() => {
					if (this.page > this.max_page || this.page == this.max_page) this.loadText = '没有更多了';
					else this.loadText = '努力加载中';
				}, 500)
			},
			//发送好友助力
			async yaoqing(item) {
				if (item.is_send == 1) {
					this.$u.toast('已经邀请过该好友')
					return
				}

				let res = await this.$http.index.msghelp({
					type: 2,
					help_user_id: item.id,
					source_id: this.id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.friendlist = []
					this.page = 1
					this.friend = false
				}
			},

			// 种植
			zhongzhi(item) {
				this.item = item
				this.seeding = true
			},
			// 确认种植
			async againCofirm() {
				let res = await this.$http.index.seedin({
					land_id: this.id,
					seed_id: this.item.id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.fieldindex()
					this.getUserInfo();
					this.seeding = false
					this.openList = false
				}

			},
			// vip加速
			async huiyuanJia() {
				if (this.getspeeditem.vip_num >= this.getspeeditem.vip_max) {
					this.$u.toast('VIP次数已达上线！')
					return
				}
				let res = await this.$http.index.vipAddspeed({
					type: 2,
					source: this.id
				})
				if (res.code == 1) {
					this.fieldindex()
					this.accelerate = false
					this.$u.toast('VIP加速成功！')
				} else {
					this.$u.toast(res.msg)
				}
			},


			// 看广告
			async seeadv() {
				this.$u.toast('正在维护中！')
				return
				if (this.getspeeditem.video_num >= this.getspeeditem.video_max) {
					this.$u.toast('广告次数已达上线！')
					return
				}
				if (this.ad_free == 0) {
					if (this.$u.os() == 'ios') {
						clearTimeout(this.timer)
						let videoSrc = Math.floor(Math.random() * 5) + 1
						this.video = 'http://image.qxgm.site/tdz/img/video' + videoSrc + '.gif'
						this.showVideo = true
						this.$refs.uCountDown.start();
						// 发送ios开始请求 
						this.iosStar()
						this.timer = setTimeout(() => {
							this.showVideo = false
							// 发送ios开始结束
							this.iosEnd()
						}, 27000)
					} else if (this.$u.os() == 'android') {
						this.$p.navto('/pages/index/aniordvideo1?id=' + this.urlCallback.extra)

					} else {
						clearTimeout(this.timer)
						let videoSrc = Math.floor(Math.random() * 5) + 1
						this.video = 'http://image.qxgm.site/tdz/img/video' + videoSrc + '.gif'
						this.showVideo = true
						this.$refs.uCountDown.start();
						this.timer = setTimeout(() => {
							this.showVideo = false
						}, 27000)
					}
				} else {
					// todo 调用接口获得
					let res = await this.$http.index.adResult({
						type: 2,
						source: this.id
					})
					if (res.code == 1) {
						this.fieldindex()
						this.accelerate = false
						this.$u.toast('跳过广告获得加速成功！')
					} else {
						this.$u.toast(res.msg)
					}
				}

			},
			async iosStar() {
				let res = await this.$http.index.adlookStart({
					type: 2,
					source: this.id
				})
			},
			async iosEnd() {
				let res = await this.$http.index.adlookEnd({
					type: 2,
					source: this.id
				})
				if (res.code == 1) {
					this.fieldindex()
					this.accelerate = false
				}
			},
		}
	}
</script>

<style lang="less">
    
    .flybox4{
    	animation: mover linear 1.5s infinite;
    }
    
    @keyframes mover {
    	0% {
    		transform: translateY(0);
    	}     
    	50% {
    		transform: translateY(5px);
    	}
        
        100% {
        	transform: translateY(0px);
        }
    }
    
	.scrollbox {
		height: 300px;
		overflow-y: scroll;
		padding: 0 30px;
		box-sizing: border-box;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
			background-size: 100% 100%;
			margin-bottom: 2px;
			padding: 5px 9px;
			box-sizing: border-box;
		}

		.header {
			width: 47px;
			border-radius: 50%;
		}

		.name {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-bottom: 9px;
			white-space: nowrap;
			/*不允许换行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
		}

		.ybox {
			flex: 1;
			margin-left: 4px;
			width: 0%;
		}

		.sind {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
		}

		.right {
			display: block;
			width: 60px;
			font-size: 12px;
			font-weight: normal;
			text-align: center;
			height: 30px;
			line-height: 31px;
			color: #f9e5b6;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.zone {
		position: relative;
		min-height: 100vh;
	}



	.main {
		position: relative;
		width: 100%;
	}

	.bg {
		width: 100%;
		margin-top: -70px;
	}

	.jihuop2 {
		font-size: 15px;
		font-weight: normal;
		color: #50433A;
		line-height: 30px;
		text-align: center;
		padding: 0 7%;

		.t1 {
			font-size: 18px;
			color: #ED519F;
		}

		.t2 {
			font-size: 18px;
			color: #4587FF;
		}

		.small {
			font-size: 14px;
			color: #666;
		}
	}

	.sendtip {
		text-align: center;
		margin-top: 10px;
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.fiedld {
		width: 100%;

		.part {
			position: absolute;
			width: 30%;

			.viplist {
				position: absolute;
				z-index: 1;
				font-size: 10px;
				color: #ffffff;
				right: 6px;
				top: 42px;
                text-shadow: 0 1px 1px #000000;
			}

		}

		.postion1 {
			top: 23.5%;
			left: 17%;
			z-index: 5;
		}

		.postion2 {
			top: 27.5%;
			left: 35%;
			z-index: 6;
		}

		.postion3 {
			top: 23%;
			left: 52%;
			z-index: 4;
		}

		.postion4 {
			top: 19%;
			left: 34%;
			z-index: 3;
		}

		.postion5 {
			top: 15%;
			left: 52%;
			z-index: 2;
		}

		.postion6 {
			top: 19%;
			left: 69%;
			z-index: 1;
		}

		.tian {
			width: 100%;
			position: relative;
		}

		.tipo {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);

			text {
				width: 100%;
				font-size: 13px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 17px;
				text-align: center;
				background: url(http://image.qxgm.site/tdz/img/yaoyuan/mg-08.png) no-repeat;
				background-size: 100% 100%;
				margin-top: -8%;
			}

			.time {
				width: 80%;
				height: 20px;
				line-height: 16px;
				text-align: center;
				background: url(http://image.qxgm.site/tdz/img/yaoyuan/mg-12.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				color: #FFFFFF;
				font-size: 12px;
				position: absolute;
				top: -8px;
				left: 0;
				right: 0;
				margin: auto;
			}
		}

		.timg {
			width: 43%;
		}
	}

	.navbox {
		width: 61px;
		position: absolute;
		right: 0;
		top: 44%;
		transform: translateY(-50%);

		image {
			width: 100%;
			margin-bottom: 2vh;
		}

		.img3 {
			float: right;
			width: 90%;
		}
	}

	.warp3 {
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}


	.showHandler {
		animation: showHandler 0.8s forwards ease;
	}

	.hideHandler {
		animation: hideHandler 0.8s forwards ease;
	}

	@keyframes showHandler {
		0% {
			bottom: -50%;
		}

		100% {
			bottom: 0%;
		}
	}

	@keyframes hideHandler {
		0% {
			bottom: 0%;
		}

		100% {
			bottom: -50%;
		}
	}

	.m_close3 {
		position: absolute;
		top: -7%;
		right: 8px;
		width: 32px;
	}

	.m_info3 {
		display: block;
		margin: 0 auto;
		width: 100%;
		background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
		background-size: 100% auto;
		min-height: 280px;
	}

	.yun_mask {
		position: absolute;
		left: 0;
		top: -10%;
		width: 43%;
		z-index: 9;
	}

	.mask_content3 {
		.m_info3 {
			padding: 0% 6px 10px;
			box-sizing: border-box;
		}

	}

	.linuan {
		float: right;
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(0deg, #253745, #43413E);
		border: 1px solid #AAAAAA;
		border-radius: 9px;
		height: 24px;

		text {
			font-size: 12px;
			font-weight: normal;
			color: #ffff;
			padding: 0 13px;
		}

		.linimg {
			width: 20px;
		}
	}

	.gundong {
		height: 260px;
	}

	.caolist {
		padding: 1% 0px 0px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;


		.link {
			width: 24%;
			background: url(http://image.qxgm.site/tdz/img/yaoyuan/mg-17.png) no-repeat;
			background-size: 100% 100%;
			padding: 12px 0 10px;
			text-align: center;
			margin-right: 1%;
		}

		.hua1 {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
		}

		.stime {
			display: block;
			margin: 0 auto;
			width: 70%;
			font-size: 12px;
			zoom: 0.76;
			font-weight: normal;
			color: #666666;
			text-align: center;
			background: #eac99c;
			border-radius: 5px;
		}

		.garden {
			display: block;
			margin: 0 auto;
			width: 60%;
		}

		.bo1 {
			display: flex;
			align-items: center;

			image {
				width: 12px;
			}

			text {
				font-size: 13px;
				font-weight: normal;
				color: #faf1be;
				text-shadow: 0 1px 1px #CB6500;
			}
		}

		.boz {
			margin: 6px auto 0;
			box-sizing: border-box;
			padding: 2px 0;
			width: 70%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: url(http://image.qxgm.site/tdz/img/yaoyuan/mg-16.png) no-repeat;
			background-size: 100% 100%;

			.boh {
				font-size: 13px;
				font-weight: normal;
				color: #faf1be;
				text-shadow: 0 1px 1px #CB6500;
			}
		}
	}

	.jiasubox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 7%;

		.jianbox {
			position: relative;
			width: 33%;
			text-align: center;
			background: url(http://image.qxgm.site/tdz/img/yaoyuan/smg-04.png) no-repeat;
			background-size: 100% 100%;
			padding: 14px 0;
		}

		.freeadimg {
			position: absolute;
			left: 2px;
			top: 2px;
			width: 35px;
			z-index: 9;
		}

		.seeAdv {
			display: block;
			margin: 0 auto;
			width: 51%;
		}

		.jiaustile {
			font-size: 13px;
			font-weight: normal;
			color: #666666;
			line-height: 18px;
			margin: 12px 0;
		}

		.yikan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;

			text {
				color: #FF6600;
			}
		}

		.seea {
			width: 90%;
			margin: 8px auto 0;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #fef6c7;
			line-height: 29px;
			height: 29px;
			text-shadow: 0 1px 1px #CB6500;
			background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
			background-size: 100% 100%;
		}

	}

	.plist {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		margin-top: 14px;

		.parts {
			width: 25%;
			box-sizing: border-box;
		}

		.sbimg {
			width: 64px;
			padding: 9px 5px;
			background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
			background-size: 100% 100%;
			margin: auto;
		}

		.tanimg {
			width: 100%;
		}

		.toan {
			font-size: 14px;
			font-weight: normal;
			color: #333333;
			line-height: 14px;
			margin-top: 12px;
			text-align: center;
		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.receive {
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.received {
		filter: grayscale(100%);
		display: block;
		width: 75px;
		font-size: 13px;
		height: 33px;
		font-weight: normal;
		text-align: center;
		color: #f9e5b6;
		line-height: 33px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
    .book{
        margin-right: 5px;
    }
    .hei{
        color: #000!important;
    }
</style>